package com.iot.ammeter.ui.components.auth

import android.content.res.Configuration
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.TextFieldDefaults
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FiberPin
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.iot.ammeter.R
import com.iot.ammeter.ui.theme.AmmeterAppTheme
import com.iot.ammeter.ui.theme.material3OutlinedTextFieldColors


@Composable
fun Register(register: (email: String, password: String, mailCode: String, onFinish: ()->Unit) -> Unit) {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    var mailCode by remember { mutableStateOf("") }
    var enabled by remember { mutableStateOf(true) }

    Column {
        EmailTextField(email, Modifier.padding(0.dp, 0.dp)) { email = it }
        PasswordTextFiled(password, Modifier.padding(0.dp, 10.dp)) { password = it }

        // 验证码检验框
        Row(
            modifier = Modifier.fillMaxWidth().padding(0.dp, 0.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            val labelAndDesc = stringResource(id = R.string.mail_code)
            OutlinedTextField(
                label = { Text(text = labelAndDesc) },
                leadingIcon = {
                    Icon(
                        imageVector = Icons.Filled.FiberPin,
                        contentDescription = labelAndDesc
                    )
                },
                value = mailCode,
                onValueChange = { mailCode = it },
                maxLines = 1,
                singleLine = true,
                modifier = Modifier
                    .weight(1f)
                    .padding(0.dp, 0.dp, 20.dp, 0.dp),
                colors = TextFieldDefaults.material3OutlinedTextFieldColors()
            )
            Button(
                onClick = {
                },
                // OutlinedTextField 前面存在一个未知的边距，手动设置按钮边距来模拟垂直居中
                modifier = Modifier.padding(0.dp,10.dp, 0.dp, 0.dp),
                shape = RoundedCornerShape(5)
            ) {
                Text(
                    text = stringResource(id = R.string.send_mail_code),
                    color = MaterialTheme.colorScheme.onPrimary
                )
            }
        }

        Button(
            onClick = {
                enabled = false
                register(email, password, mailCode) {
                    enabled = true
                }
            },
            enabled = enabled,
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 30.dp),
        ) {
            Text(
                text = stringResource(id = R.string.register),
                color = MaterialTheme.colorScheme.onPrimary
            )
        }
    }
}

@Preview(name = "register", showBackground = true)
@Preview(name = "register night", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun RegisterPreview() = AmmeterAppTheme {
    Register { _, _, _, _-> }
}